<template>


  <div class="header">

     <div class="header-left">

      <span class="iconfont fanghui">&#xe616;</span>

     </div>
     <div class="input">
       <span class="iconfont sousuo">&#xe61b;</span><span >请输入景点</span>
     </div>
     <div class="header-right">
       <router-link to="/city"><span>{{city}}</span></router-link>
       <span class="iconfont xiala">&#xe68d;</span>
     </div>

  </div>


</template>

<script>
    export default {
        name: "Header",
        props:{
          city:String
       }


    }
</script>

<!--在样式里面引入样式要用@import-->
<style scoped lang="stylus">
@import '~styles/backthemcolor.styl'

.header
  height:.86rem
  width:100%
  display:flex
  line-height:.86rem
  background $backcolor
  .header-left
    width:.64rem
    margin-left .2rem
    float left
    color white
    .fanghui
      font-size .4rem
  .input
    flex:1
    float: left
    background #fff
    color: #ccc
    border-radius .1rem
    height .64rem
    margin-top .11rem
    line-height .64rem
    margin-left .1rem
    margin-right .1rem
    .sousuo
     font-size .4rem
  .header-right
    width:1.24rem
    float: left
    text-align center
    color white
    .xiala
     margin-left -.1rem
     font-size .3rem




</style>
